<template>
  <div class="store-shelf">
    <shelf-title :title="$t('shelf.title')" class="shelf-title"></shelf-title>
    <scroll class="store-shelf-scroll-wrapper"
            :top="0"
            @onScroll="onScroll"
            :bottom="scrollBottom" ref="scroll">
      <shelf-search></shelf-search>
      <shelf-list :data="shelfList"></shelf-list>
    </scroll>
    <shelf-footer></shelf-footer>
  </div>
</template>

<script>
  import ShelfTitle from '@/components/shelf/ShelfTitle'
  import { storeShelfMixin } from '../../utils/mixin'
  import Scroll from '../../components/common/Scroll.vue'
  import ShelfSearch from '../../components/shelf/ShelfSearch.vue'
  import ShelfList from '../../components/shelf/ShelfList.vue'
  import ShelfFooter from '../../components/shelf/ShelfFooter.vue'
  import { realPx } from '../../utils/utils'
  export default {
    mixins: [storeShelfMixin],
    components: {
      ShelfTitle,
      Scroll,
      ShelfSearch,
      ShelfList,
      ShelfFooter
    },
    data() {
      return {
        scrollBottom: 0
      }
    },
    watch: {
      isEditMode(isEditMode) {
        this.scrollBottom = isEditMode ? realPx(48) : 0
        this.$nextTick(() => {
          this.$refs.scroll.refresh()
        })
      }
    },
    methods: {
      onScroll(offsetY) {
        this.setOffsetY(offsetY)
      }
    },
    mounted() {
      this.getShelfList()
      this.setCurrentType(1)
      this.setShelfCategory([])
    }
  }
</script>

<style lang="scss"
       rel="stylesheet/scss" scoped>
    @import "../../assets/styles/global";
  .store-shelf {
    @include absCenter;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 100;
    .shelf-title {
      z-index: 120;
    }
    .store-shelf-scroll-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 101;
    }
  }
</style>
